<script>
import { toRefs,reactive } from '@vue/runtime-core'
import {useRouter} from "vue-router"
import { Toast} from "vant"
import { useStore } from "../store/index";
    export default {
        setup() {
            let router = useRouter();
            let data=reactive({
                list:[
                    "苹果",
                    "海鲜",
                    "茄子",
                    "豆腐",
                    "海盐颗粒花生酱",
                    "芋头",
                    "白萝卜",
                ],
                title:"",
                history:null,
            })

            let store=useStore()
            data.history=store.shophistory

            // 跳转搜索详情页
            let search=()=>{
                if(data.title!=""){
                    if(!data.history.includes(data.title)){
                        store.shophistory.push(data.title)
                    }
                    router.push({
                        path:"/shopSearchList",
                        query:{
                            title:data.title,
                            back:"/shopSearch",
                            id:0
                        }
                    })
                }else{
                    Toast("搜索内容不能为空")
                }
                
            }

            // 点击历史搜索过的内容进行搜索
            let hisearch=(title)=>{
                data.title=title
                search()
            }

            // 清除历史记录
            let del=()=>{
                store.shophistory=[]
                data.history=store.shophistory
            }

            // 热门搜索
            let hot=(title)=>{
                data.title=title
                search()
            }
            

            return {
                ...toRefs(data),
                search,
                hisearch,
                del,
                hot,
            }
        },
    }
</script>


<template>

    <div class="shopSearch">
        <div class="wrapper">
            <div class="header">
                <router-link to="/shop" class="header_left icon_coo icon-a-ziyuan558"></router-link>
                <div class="header_center">
                    <input type="text" placeholder="搜索商品" v-model="title">
                    <i class="icon_coo icon-sousuo1"></i>
                </div>
                <div class="header_right iconL icon-sousuo" @click="search"></div>
            </div>
            <div class="search_history">
                <div class="search_historyTitle" v-show="history.length">
                    <p>历史搜索</p>
                    <i class="iconL icon-lajitong" @click="del"></i>
                </div>
                <div class="search_main">
                    <ul>
                        <li v-for="(item,index) in history" :key="index" @click="hisearch(item)">{{item}}</li>
                    </ul>
                </div>
            </div>
            <div class="search_history">
                <div class="search_historyTitle">
                    <p>热门搜索</p>
                </div>
                <div class="hot_main">
                    <ul>
                        <li v-for="(item,index) in list" :key="index" @click="hot(item)">{{item}}</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>


<style lang="scss" scoped>
.shopSearch{
    .wrapper{
        .header{
            padding: 0 16px;
            height: 44px;
            border-bottom: 1px solid rgb(248, 242, 230);
            display: flex;
            align-items: center;
            justify-content: space-between;
            .header_left{
                font-size: 18px;
            }
            .header_center{
                padding: 0 50px 0 20px;
                flex: 1;
                position: relative;
                input{
                    width: 100%;
                    border: none;
                    background-color: rgb(249, 245, 236);
                    height: 30px;
                    padding-left: 30px;
                    font-size: 10px;
                    border-radius: 8px;
                }
                .icon-sousuo1{
                    position: absolute;
                    left: 28px;
                    top: 7px;
                    font-size: 14px;
                }
            }
            .header_right{
                font-size: 22px;
            }
        }
        .search_history{
            
            padding: 0 16px;
            .search_historyTitle{
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-top: 26px;
                p{
                    font-weight: 600;
                    font-size: 14px;
                }
                i{
                    font-size: 18px;
                }
            }
            .search_main,.hot_main{
                ul{
                    display: flex;
                    flex-wrap: wrap;
                    margin-top: 14px;
                    li{
                        font-size: 12px;
                        margin:0 6px 6px 0;
                        padding: 5px 10px;
                        border-radius: 4px;
                        background-color: rgb(249, 247, 243);
                    }
                }
            }
            .hot_main{
                li{
                    &:nth-child(-n+3){
                        background-color: #fff;
                        border: 1px solid rgb(247, 41, 41);
                    }
                }
            }
        }
    }
}
</style>